<template>
  <section class="content-view">
    <h2 class="item-title">基础使用</h2>
    <Swipe @start="start" @move="move" @change="change">
      <SwipeItem>
        <div :style="{'background': bgColor[0]}" class="item">0</div>
      </SwipeItem>
      <SwipeItem>
        <div :style="{'background': bgColor[1]}" class="item">1</div>
      </SwipeItem>
      <SwipeItem>
        <div :style="{'background': bgColor[2]}" class="item">2</div>
      </SwipeItem>
    </Swipe>

    <h2 class="item-title">纵向滚动</h2>
    <Swipe :vertical="true" style="height: 200px">
      <SwipeItem v-for="key in count" :key="key" :style="{'background': bgColor[key-1]}">
        <div class="item">{{ key-1 }}</div>
      </SwipeItem>
    </Swipe>

    <h2 class="item-title">定制indicators</h2>
    <Swipe :index.sync="index">
      <SwipeItem v-for="key in count" :key="key" :style="{'background': bgColor[key-1]}">
        <div class="item">{{ key-1 }}</div>
      </SwipeItem>
      <div v-for="key in count" slot="indicators" :key="key" :class="['indicators', {'active': key-1 === index}]"/>
    </Swipe>

  </section>
</template>

<script>
import { Swipe } from '&'
const { SwipeItem } = Swipe

export default {
  components: {
    Swipe,
    SwipeItem,
  },
  data () {
    return {
      index: 0,
      count: 3,
    }
  },
  created () {
    this.bgColor = ['red', 'green', 'blue']
  },
  methods: {
    start (i) { console.log(`start: ${i}`) },
    move (i) { console.log(`move: ${i}`) },
    change (i) { console.log(`change: ${i}`) },
  },
}
</script>

<style lang="stylus" scoped>
.item {
  height: 200px;
  line-height: 200px;
  text-align: center;
  font-size: 40px;
  font-weight: 500;
  color: #fff;
}
.indicators {
  height: 14px;
  width: 14px;
  background-image: url('../../../assets/images/logo.png');
  background-position: center;
  background-size: cover;
  opacity: 0.5;

  &.active {
    opacity: 1;
  }
}
</style>
